<script setup lang="ts">
import { watch, inject, ref, onBeforeUnmount, onMounted, reactive } from 'vue'
import { FormData, getListApi } from '@/api/system/menu'
import {
  ElForm,
  ElFormItem,
  ElRow,
  ElCol,
  ElRadioGroup,
  ElRadio,
  ElInput,
  ElInputNumber,
  ElTreeSelect,
  ElSelect,
  ElOption
} from 'element-plus'
const currentRow: FormData = inject('currentRow') as FormData
const formRef = ref<InstanceType<typeof ElForm>>()
onMounted(() => {
  getListApidata()
})
const options = ref<Array<{ name: string; id: number }>>([])
const getListApidata = async () => {
  const res = await getListApi()
  options.value = res.data.list
}
const optionsSelect = reactive([
  {
    name: 'list'
  },
  {
    name: 'create'
  },
  {
    name: 'modify'
  },
  {
    name: 'del'
  },
  {
    name: 'modify_status'
  },
  {
    name: 'select'
  }
])
// 提交
const submit = async () => {
  const valid = await formRef.value?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    return currentRow
  }
}
// 重置
const reset = () => {
  Object.assign(currentRow, {})
}
watch(
  () => currentRow,
  (row) => {
    if (!row) return
  },
  {
    deep: true,
    immediate: true
  }
)
onBeforeUnmount(reset)

defineExpose({
  submit,
  reset
})
</script>

<template>
  <ElForm ref="formRef" :model="currentRow" label-width="100px">
    <ElRow>
      <ElCol :span="24">
        <ElFormItem label="上级菜单" prop="parent_id">
          <ElTreeSelect
            v-model="currentRow.parent_id"
            style="width: 240px"
            :data="options"
            :render-after-expand="false"
            check-strictly
            :props="{ value: 'id', label: 'name' }"
            placeholder="请输入内容"
          />
        </ElFormItem>
      </ElCol>
      <ElCol :span="24">
        <ElFormItem label="菜单类型" prop="menu_type" required>
          <ElRadioGroup v-model="currentRow.menu_type">
            <ElRadio label="M">目录</ElRadio>
            <ElRadio label="C">菜单</ElRadio>
            <ElRadio label="F">按钮</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
      </ElCol>
      <ElCol :span="24">
        <ElFormItem label="菜单状态" prop="visible">
          <ElRadioGroup v-model="currentRow.visible">
            <ElRadio label="0">显示</ElRadio>
            <ElRadio label="1">隐藏</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
      </ElCol>
      <ElCol :span="12">
        <ElFormItem label="菜单名称" prop="name" required>
          <el-input v-model="currentRow.name" placeholder="请输入菜单名称" />
        </ElFormItem>
      </ElCol>
      <el-col :span="12" v-if="currentRow.menu_type !== 'F'">
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="currentRow.component" placeholder="请输入组件路径(component)" />
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="currentRow.menu_type !== 'F'">
        <el-form-item label="路由参数" prop="query">
          <el-input v-model="currentRow.query" placeholder="请输入路由参数(redirect)" />
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="currentRow.menu_type !== 'F'">
        <el-form-item
          label="菜单图标
"
          prop="icon"
        >
          <el-input v-model="currentRow.icon" placeholder="请输入菜单图标" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="显示排序" prop="order_num" required>
          <el-input-number v-model="currentRow.order_num" controls-position="right" :min="0" />
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="currentRow.menu_type !== 'F'">
        <el-form-item prop="path" label="路由地址">
          <el-input v-model="currentRow.path" placeholder="请输入路由地址" />
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="currentRow.menu_type == 'F'">
        <el-form-item prop="perms" label="权限标识">
          <el-input v-model="currentRow.perms" placeholder="请输入权限标识" />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12" v-if="currentRow.menu_type == 'F'">
        <el-form-item prop="perms" label="权限标识">
          <el-select
            v-model="currentRow.perms"
            placeholder="请选择权限标识"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in optionsSelect"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-col> -->
    </ElRow>
  </ElForm>
</template>
